<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    body{

    }
    /* 页面头部 header*/
    header {height:60px; background: #ef48ad
    }
    nav {height:30px; background: #40ff32; margin-top: 10px; width: 100%}
    nav ul li {width: 50px; height:30px; float: left; line-height: 30px;list-style:none;background-color: #761c19;margin-right: 20px;text-align: center}
    /* 页面中部div*/

    section {height: 500px; background: #243aef; width:  70%; float: left}
    article {background: #ff566e; width: 500px; margin: 0 auto; text-align: center}
    aside {height: 500px; background: #7400ff;width: 28%; float: right}
    /* 页面底部 footer*/
    footer {height: 100px; background: #78efea; clear: both; margin-top: 10px}
    #fuck{
        color: saddlebrown;
    }
    @media only screen and (max-width: 500px) {
        aside {display: none}
        section {height: 500px; background: #000000; width:  30%; float: left}
        #gonggao{
            color: red;
        }
        #fuck{
            color: red;
        }
    }
</style>
<body>
<div id="fuck"> fuck </div>


<header> 我是布局的头部</header>
<nav>
<ul >
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
</nav>

<section>
<article>
    <header> 2018年度总结</header>
<p > 豪华游轮三日游</p>
    <footer> 集结地址：崇文路123</footer>

</article>

</section>
<aside>
    <header id="gonggao"> 公告</header>
    <nav style="height: 300px">

    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>12</li>

    </nav>
    <footer> footer</footer>
</aside>
<footer>

    我是布局的尾部

</footer>
</body>
</html>